<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('用户管理')"></head>
    <link rel="stylesheet" th:href="@{/static/plugin/beone/main.css}"/>
</head>
<body>
<div class="lenos-search">
    <div class="select">
        账户：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="userAccount" autocomplete="off"/>
        </div>
        姓名：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="userName" autocomplete="off"/>
        </div>
        手机：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="userMobile" autocomplete="off"/>
        </div>
        <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
        </button>
        <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" data-type="reload" style="float: right">
            <i class="layui-icon">&#xe669;</i>
        </button>
    </div>
</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
        <button class="layui-btn layui-btn-normal" data-type="update">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button class="layui-btn layui-btn-normal" data-type="detail">
            <i class="layui-icon">&#xe605;</i>查看
        </button>
    </div>
</div>
<table id="userList" class="layui-hide" lay-filter="user"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetPwd">重置密码</a>
</script>
<script th:inline="javascript">/*<![CDATA[*/
layuiUtils.onEnter(function () {
    $(".select .select-on").click();
});
layui.use('table', function () {
    var table = layui.table;
    var listUrl =  /*[[@{/system/user/list}]]*/ "/system/user/list";
    //方法级渲染
    table.render({
        id: 'userList',
        elem: '#userList',method:'POST'
        , url: listUrl
        , cols: [[
            {checkbox: true, fixed: true, width: '3%'}
            , {field: 'userAccount', title: '账户', width: '10%'}
            , {field: 'userName', title: '姓名', width: '8%'}
            , {field: 'userMobile', title: '手机', width: '8%'}
            , {field: 'userStatus', title: '状态', width: '5%',templet: function (d) {
                  return d.userStatus == '01' ? "正常" : "停用";
            }}
            , {field: 'createTime', title: '创建时间', width: '12%',templet: function (d) {
                return formatDate(d.createTime, 'yyyy-MM-dd HH:mm:ss');
            }}
            , {field: 'lastVisit', title: '最后登录时间', width: '12%',templet: function (d) {
                return formatDate(d.lastVisit, 'yyyy-MM-dd HH:mm:ss');
            }}
            , {field: 'showRoles', title: '拥有角色', width: '15%'}
            , {field: 'userSex', title: '性别', width: '5%', templet: function (d) {
                return d.userSex == '01' ? "男" : "女";
            }}
            , {field: 'right', title: '操作', width: '18%', toolbar: "#barDemo"}
        ]]
        , page: true, request:{pageName:'page',limitName:'rows'}, height: 'full-83'
    });

    var $ = layui.$, active = {
        select: function () {
            var userAccount = $('#userAccount').val();
            var userName = $('#userName').val();
            var userMobile = $('#userMobile').val();
            table.reload("userList", {
                where: {userAccount: userAccount,userName:userName,userMobile:userMobile}
            });
        },
        reload:function(){
            $('#userAccount').val('');
            $('#userName').val('');
            $('#userMobile').val('');
            table.reload("userList", {
                where: {userAccount: null,userName:null,userMobile:null}
            });
        },
        add: function () {
            var url =  /*[[@{/system/user/showAdd}]]*/ "/system/user/showAdd";
            layuiUtils.dialog('userAdd','添加用户', url, 700, 450);
        },
        update: function () {
            var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行编辑,已选['+data.length+']行', {icon: 5});
                return false;
            }
            showUpdate(data[0].userId, true);
        },
        detail: function () {
            var checkStatus = table.checkStatus('userList')
                    , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行查看,已选['+data.length+']行', {icon: 5});
                return false;
            }
            showUpdate(data[0].userId, false);
        }
    };
    //监听工具条
    table.on('tool(user)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            showUpdate(data.userId, false);
        } else if (obj.event === 'del') {
            var index = layuiUtils.confirm('确定删除账户[<label style="color: #00AA91;">' + data.userAccount + '</label>]?',function () {
                var url = /*[[@{/system/user/delUser}]]*/ "/system/user/delUser";
                layuiUtils.doRequest(url, {userId:data.userId}, function () {
                    layer.close(index);
                    table.reload('userList');
                });
            })
        } else if (obj.event === 'edit') {
            showUpdate(data.userId, true);
        } else if (obj.event === 'resetPwd') {
            var index = layuiUtils.confirm('确定重置账户[<label style="color: #00AA91;">' + data.userAccount + '</label>]的密码?',function () {
                var url = /*[[@{/system/user/resetPwd}]]*/ "/system/user/resetPwd";
                layuiUtils.doRequest(url, {userId:data.userId});
                layer.close(index);
            })
        }
    });

    /*按钮事件绑定*/
    $('.layui-col-md12 .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    $('.select .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

function showUpdate(id, flag) {
    var url =  /*[[@{/system/user/}]]*/ "/system/user/";
    url += id + "/showUpdate" + (flag ? "" : "?detail=true");
    layuiUtils.dialog('userUpdate', (flag ? '编辑用户' : "查看用户详情"), url, 700, 450);
}
/*]]>*/</script>
</body>
</html>